<template>
    <div id="left_menu">
        <vue-particle-line class="banner-wraper">
            <div class="right_card">
                <el-card class="box-card" shadow="hover">
                    <div slot="header" class="clearfix">
                        <span class="todat_news">今日要闻</span>
                    </div>
                    <div v-for="item in wx_news" :key="item" class="text item">
                        <a :href="item.url" class="news_title">{{ item.title }}</a>
                    </div>
                </el-card>

                <el-card class="box-card" shadow="hover">
                    <div slot="header" class="clearfix">
                        <span class="todat_news">精彩文章</span>
                    </div>
                    <div v-for="item in articleInfo" :key="item" class="text item">
                        <a :href="item.url" class="news_title">{{ item.title }}</a>
                    </div>
                </el-card>
                <el-card class="box-card" shadow="hover">
                    <div slot="header" class="clearfix">
                        <span class="todat_news">友情链接</span>
                    </div>
                    <div class="text item">
                        <a href="https://www.jianshu.com/u/e6361757d8d2" class="news_title">简书</a>
                    </div>
                    <div class="text item">
                        <a href="https://www.qqdeveloper.com" class="news_title">浪子编程走四方</a>
                    </div>
                </el-card>
            </div>

        </vue-particle-line>
    </div>
</template>

<script>
    export default {
        name: 'rightsidebar',
        data() {
            return {
                articleNumber: '',
                flag: true,
                title: '逆月翎',
                is_show: true,
                wx_news: [],
                articleInfo: []
            }
        },
        mounted: function() {
            var _this = this;
            this.$req({
                method: "post",
                url: 'http://49.235.28.88:3000/article/v1/wx_news',
                data: {}
            }).then(function(res) {
                if (res.data.status == 200) {
                    var result = JSON.parse(res.data.payload.data);
                    _this.wx_news = result.result.list;
                } else {
                    _this.$message.error('聚合接口可能出现异常!');
                }
            }).catch(function(e) {
                console.log(e);
                _this.$message.error('服务器可能出现异常!');
            });

            this.$req({
                method: "post",
                url: 'http://49.235.28.88:3000/article/v1/rand_article',
                data: {

                }
            }).then(function(res) {
                if (res.data.status == 200) {
                    _this.articleInfo = res.data.payload.article;

                    _this.articleInfo.forEach(data => {
                      data.url = 'http://www.niyueling.cn/#/articleDetail/' + data.id;
                    });
                } else {
                    _this.$message.error('文章出现异常!');
                }
            }).catch(function(e) {
                _this.$message.error('服务器可能出现异常!');
            });
        },
        methods: {
            clearCookie() {
                localStorage.removeItem('user');
            }
        }
    }
</script>

<style scoped>
    .right_card {
        margin-left: 100px;
    }
    .news_title {
        color: white;
    }

    .todat_news {
        color: white;
    }

    .text {
        color: white;
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 300px;
        background-color: transparent;
        margin-bottom: 30px;
    }

    h2 {
        color: white;
    }

    #left_menu {
        float: left;
        width: 13%;
        margin-left: 25px;
    }

    @media (max-width: 767px) {
        #left_menu {
            display: none;
        }
    }

    #left_menu a:hover {
        color: black;
        background: white;
    }

    nav {
        padding: 20px 0;
    }

    .info img {
        width: 120px;
        height: 120px;
    }

    .archive .archive_count {
        display: block;
        color: #222;
        font-weight: 600;
        font-size: 16px;
    }

    .archive .archive_name {
        display: block;
        color: #999;
        font-size: 14px;
    }

    .active img {
        position: absolute;
        top: -145px;
        left: 35px;
    }
</style>
